<template>
  <div class="dashboard-container">
    <!--    <div class="dashboard-text">name:{{ name }}</div>-->
    <!--    <div class="dashboard-text">roles:<span v-for="role in roles" :key="role">{{ role }}</span></div>-->
    <el-button  type="primary" @click="show">点击刷新实况图</el-button>
    <div class="chart-container">
      <div id="chart" class="chart" style="height:500px;width:100%" />
    </div>


  </div>
</template>
<script>
  import echarts from 'echarts'
  import player from '@/api/dbwork/player'
  export default {
    data(){
      return{
        charts:{}
      }
    },
    created() {
    },
    methods: {
      show() {
        var chartDom = document.getElementById('chart');
        var myChart = echarts.init(chartDom);
        var option;
        myChart.showLoading();
        player.getGameManage()
          .then(response => {
            myChart.hideLoading();
            var data = response.data.data
            // data.children.forEach(function (datum, index) {
            //   index % 2 === 0 && (datum.collapsed = true);
            // });

            myChart.setOption(option = {

              tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
              },

              series: [
                {
                  type: 'tree',

                  data: [data],

                  top: '1%',
                  left: '15%',
                  bottom: '1%',
                  right: '7%',

                  symbolSize: 7,

                  orient: 'RL',

                  label: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                  },

                  leaves: {
                    label: {
                      position: 'left',
                      verticalAlign: 'middle',
                      align: 'right'
                    }
                  },

                  emphasis: {
                    focus: 'descendant'
                  },

                  expandAndCollapse: true,
                  animationDuration: 550,
                  animationDurationUpdate: 750
                }
              ]
            })
          })
        option && myChart.setOption(option);
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>
